<template>
  <PageWrapper :sidebarWidth="230" ref="contentElRef">
    <template #sidebar>
      <MyTreeSelect v-bind="treeProps" @select="onTreeSelect" ref="dataGroupTreeRef" @add-child="handleAddGroup" @edit="handleEditGroup" />
    </template>
    <slot></slot>
    <MyDataGroupList @register="registerGroupList" @success="handleReload" :bizType="bizType" />
    <MyDataGroupForm @register="registerDataGroupForm" @success="handleReload" />
  </PageWrapper>
</template>
<script lang="ts" name="data-group-wrapper" setup>
  import { ref, nextTick, watch } from "vue"
  import { PageWrapper } from "/@/components/Page"
  import { MyTreeSelect, MyTreeProps } from "/@/components/BizTreeSelect"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useModal } from "/@/components/Modal"
  import { useGlobSetting } from "/@/hooks/setting"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { Icon } from "/@/components/Icon"
  import { isFunction } from "/@/utils"
  import { listDataGroupTree } from "/@/api/infra/dataGroup"
  import { MyDataGroupForm, MyDataGroupList } from "/@/components/BizDataGroup/index"

  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const glob = useGlobSetting()
  const [registerGroupList, { openDrawer: openGroupList }] = useDrawer()
  const [registerDataGroupForm, { openModal: openDataGroupForm }] = useModal()
  const emtis = defineEmits(["reload", "change"])

  const props = defineProps({
    bizType: { type: Number },
    groupId: { type: String },
    groupCodeRequired: { type: Boolean, default: false },
    isTree: { type: Boolean, default: true },
    title: { type: String, default: "数据组" },
    groupType: { type: String },
    deleteApi: { type: Function as PropType<(arg?: any, successCallback?: Function) => any> },
    batchDeleteApi: { type: Function as PropType<(arg?: any, successCallback?: Function) => any> },
    saveOrUpdateApi: { type: Function as PropType<(arg?: any, isUpdate?: boolean) => any> },
  })

  // 当前选中的分组
  const groupId = ref()

  const dataGroupTreeRef = ref<any>()
  const deleteApi = async (arg: any, successCallback: Function) => {
    console.log("arg", arg)
    isFunction(props.deleteApi) &&
      (await props.deleteApi({ ...arg }, (params) => {
        successCallback(params)
        dataGroupTreeRef.value.reload()
      }))
  }

  const listDataGroupTreeApi = async (arg?: any) => {
    if (!isFunction(listDataGroupTree)) {
      return
    }
    const data = await listDataGroupTree({ ...arg })
    const nodeFirst = {
      name: "全部",
      id: "all",
      showAddSub: false,
      showEdit: false,
      showDelete: false,
    }
    return [nodeFirst, ...data]
  }

  const treeProps = ref<MyTreeProps>({
    api: listDataGroupTreeApi,
    searchField: "name",
    enableAddChird: true,
    enableDelete: true,
    enableEdit: true,
    deleteApi,
    params: {
      groupType: props.groupType,
      bizType: props.bizType,
    },
  })

  // 左侧树选择后触发
  const onTreeSelect = (data) => {
    if (data === "all") {
      emtis("change", null)
      return
    }
    console.log("onTreeSelect", data)
    groupId.value = data
    emtis("change", data)
  }

  const handleAddGroup = (node) => {
    openDataGroupForm(true, {
      isUpdate: false,
      ...props,
      deleteApi,
      record: { parentId: node?.id },
    })
  }

  const handleEditGroup = (node) => {
    openDataGroupForm(true, {
      isUpdate: true,
      ...props,
      deleteApi,
      record: {
        ...node,
        name: node.title,
      },
    })
  }

  const handleOpenGroupList = () => {
    console.log("props", props)
    openGroupList(true, {
      title: props.title,
      width: 800,
      groupCodeRequired: props.groupCodeRequired,
      deleteApi,
      batchDeleteApi: props.batchDeleteApi,
      saveOrUpdateApi: props.saveOrUpdateApi,
    })
  }

  const handleReload = () => {
    dataGroupTreeRef.value.reload()
    emtis("reload")
  }

  defineExpose({
    handleOpenGroupList,
    handleAddGroup,
  })
</script>
